<script setup lang="ts">
const router = useRouter()
const goHome = () => {
    router.push('/')
}

const props = defineProps({
    keyword: {
        type: String,
        default: () => ''
    }
})
const searchKeyword = ref(props.keyword)
const emit = defineEmits(['search'])
const search = () => {
    emit('search', searchKeyword.value)
}
const colorMode = useColorMode()

console.log(colorMode.preference)

</script>

<template>
    <el-affix>
        <div class="bg-white dark:bg-gray-800 shadow px-[10px] md:px-[20px] py-[10px]">
            <div class="max-w-[1240px] mx-auto h-[40px]  flex flex-row items-center gap-2 md:gap-6 relative">
                <div class="flex flex-row items-center gap-1">
                    <img class="w-[30px] h-[30px] md:w-[30px] md:h-[30px] cursor-pointer" src="@/assets/SimpleIconsTrendmicro.png"
                        alt="logo" @click="goHome()">
                    <h1 class="hidden md:block text-[14px] font-serif font-bold cursor-pointer dark:text-white"
                        @click="goHome()">
                        全网盘资源搜索</h1>
                </div>

                <div class="w-[300px] md:w-[400px]">
                    <client-only>
                        <div class="flex justify-center">
                            <el-input class="h-[30px]" v-model="searchKeyword" placeholder="关键词尽量完整，结果更精确"
                                @keydown.enter="search()" prefix-icon="Search" size="small" clearable>
                            </el-input>
                            <div class="w-2 h-2"></div>
                            <el-button @click="search()" type="primary" style="height:30px;width:120px">全网盘搜索</el-button>
                        </div>
                    </client-only>
                </div>

                <div class="absolute right-[10px] md:right-[20px]">
                    <client-only>
                        <el-button v-if="colorMode.preference === 'dark'" link @click="colorMode.preference = 'light'">
                            <img class="w-[20px] h-[20px]" src="@/assets/theme/LsDark.svg" alt="">
                        </el-button>
                        <el-button v-if="colorMode.preference === 'light'" link @click="colorMode.preference = 'dark'">
                            <img class="w-[20px] h-[20px]" src="@/assets/theme/MaterialSymbolsDarkMode.svg" alt="">
                        </el-button>
                    </client-only>
                    <!-- <el-button link @click="goGithub()">
            <img class="w-[20px] h-[20px]" src="@/assets/skill-icons--github-dark.svg" alt="github">
          </el-button> -->
                </div>
            </div>
        </div>
    </el-affix>
</template>

<style scoped>
:deep(.el-input__wrapper.is-focus) {
    --el-input-focus-border-color: #6648ff;
}
</style>